<template>
  <div class="monitor-container">
    <div class="search-container">
      <input
          v-model="searchQuery"
          placeholder="搜索监控编号或区域..."
          @input="handleSearch"
          class="search-input"
      />
    </div>

    <div class="video-grid">
      <div
          v-for="camera in displayedCameras"
          :key="camera.id"
          class="video-item"
          @click="openCameraDetail(camera.id)"
      >
        <video
            :src="camera.streamUrl"
            autoplay
            muted
            controls
            class="video-element"
        ></video>
        <div class="camera-info">
          <span>{{ camera.id }}</span>
          <span>{{ camera.area }}</span>
        </div>
      </div>
    </div>

    <div class="pagination-container">
      <button
          @click="prevPage"
          :disabled="currentPage === 1"
      >上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button
          @click="nextPage"
          :disabled="currentPage === totalPages"
      >下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 模拟摄像头数据
const allCameras = ref([
  { id: 'CAM001', area: '大厅入口', streamUrl: 'rtsp://example.com/cam001' },
  { id: 'CAM002', area: '大厅中央', streamUrl: 'rtsp://example.com/cam002' },
  { id: 'CAM003', area: '北侧走廊', streamUrl: 'rtsp://example.com/cam003' },
  { id: 'CAM004', area: '南侧走廊', streamUrl: 'rtsp://example.com/cam004' },
  { id: 'CAM005', area: '停车场东', streamUrl: 'rtsp://example.com/cam005' },
  { id: 'CAM006', area: '停车场西', streamUrl: 'rtsp://example.com/cam006' },
  { id: 'CAM007', area: '后门出口', streamUrl: 'rtsp://example.com/cam007' },
  { id: 'CAM008', area: '仓库入口', streamUrl: 'rtsp://example.com/cam008' },
  // 更多摄像头...
])

const searchQuery = ref('')
const currentPage = ref(1)
const itemsPerPage = 6 // 2x3网格

// 过滤后的摄像头列表
const filteredCameras = computed(() => {
  if (!searchQuery.value) return allCameras.value

  return allCameras.value.filter(camera =>
      camera.id.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      camera.area.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

// 当前页显示的摄像头
const displayedCameras = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return filteredCameras.value.slice(start, end)
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(filteredCameras.value.length / itemsPerPage)
})

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1 // 搜索后重置到第一页
}

// 分页控制
const prevPage = () => {
  if (currentPage.value > 1) currentPage.value--
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) currentPage.value++
}

// 打开摄像头详情
const openCameraDetail = (cameraId) => {
  router.push({ name: 'CameraDetail', params: { id: cameraId } })
}

// 初始化时加载视频流
onMounted(() => {
  // 这里可以添加初始化视频流的逻辑
})
</script>

<style scoped>
.monitor-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
  text-align: center;
}

.search-input {
  width: 50%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  flex: 1;
}

.video-item {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.video-item:hover {
  transform: scale(1.02);
}

.video-element {
  width: 100%;
  height: 80%;
  object-fit: cover;
}

.camera-info {
  padding: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  justify-content: space-between;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
  padding: 10px;
}

.pagination-container button {
  margin: 0 10px;
  padding: 5px 15px;
  cursor: pointer;
}
</style>